<script lang='ts' setup>
import { reactive,onMounted,ref} from 'vue'
import type { FormInstance, FormRules } from 'element-plus'

const state = reactive({ 
	time: ''
}) 
const ruleFormRef = ref<FormInstance>()
const props = withDefaults(defineProps<{
    id: number,
    modelValue: boolean, 
	title: string
}>(), { 
	title: '',
	id: 0
})

const emit = defineEmits(['update:modelValue'])

const closeDialog = () => {
    emit('update:modelValue', false)
}

const previewInfo = (row: any) => {
    
}

const rules = reactive<FormRules<any>>({
	time: [
		{
			type: 'date',
			required: true,
			message: '请选择时间',
			trigger: 'change',
		},
	],
})

const submitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	await formEl.validate((valid, fields) => {
		if (valid) {
		console.log('submit!')
		} else {
		console.log('error submit!', fields)
		}
	})
}

</script>

<template>
    <main>
        <el-dialog v-model="props.modelValue" :title="`${props.title}的离职`" @close="closeDialog" style="width: 800px;" center>
            <section>
				<el-form
					ref="ruleFormRef"
					:model="state"
					:rules="rules"
					label-width="120px"
					class="demo-ruleForm"
					  
					status-icon
				>
					<el-form-item label="离职日期" prop="time" class="mb30">
						<el-date-picker
							v-model="state.time"
							label="Pick a time"
							placeholder="请选择时间"
							style="width: 100%"
						/>
					</el-form-item>

					<el-form-item>
						<el-button type="primary" @click="submitForm(ruleFormRef)">
							确定
						</el-button>
						<el-button @click="closeDialog">取消</el-button>
					</el-form-item>
				</el-form>
			</section>
        </el-dialog>
    </main>
</template>

<style lang='scss' scoped>

</style>